<template>
  <div class="bg">
    <div class="content">
      <!-- <div class="desc">
        <div class="title">vol.vue</div>
        <p>前后端分离</p>
        <p>全自动代码生成</p>
        <p>支持前端、后台扩展的快速开发框架</p>
        <p>后台.NetCore 3.1、EntityFrameWorkCore 3.1、Dapper</p>
        <p>前端Vue、Promise、Vuex、Axios、Iview、Element-UI</p>
        <p>帐号admin666,密码123456(本地帐号admin,密码123456)</p>
      </div> -->
      <div class="login">
        <div class="login-contianer">
          <div class="login-form">
            <div class="login-title">开放平台管理系统</div>
            <div class="form-user">
              <div class="item">
                <div class="f-input">
                  <el-input type="text" v-focus prefix-icon="el-icon-user" v-model="userInfo.userName" placeholder="输入用户">
                    <!-- <i slot="prefix" class="el-icon-user"></i> -->
                  </el-input>
                </div>
                <div class="f-remove" @click="userInfo.userName = ''">
                  <!-- <Icon type="ios-close-circle" /> -->
                </div>
              </div>
              <div class="item">
                <div class="f-input">
                  <el-input type="password" v-focus prefix-icon="el-icon-lock" v-model="userInfo.passWord"
                    placeholder="输入密码" />
                </div>
                <div v-focus class="f-remove" @click="userInfo.passWord = ''">
                  <i class="ios-close-circle" />
                </div>
              </div>

              <div class="item">
                <div class="f-input">
                  <el-input v-focus prefix-icon="el-icon-lock" v-model="userInfo.verificationCode" placeholder="验证码" />
                </div>
                <div class="code" @click="
                  () => {
                    getVierificationCode();
                  }
                ">
                  <img v-show="codeImgSrc != ''" :src="codeImgSrc" />
                </div>
              </div>
            </div>
            <div style="loging-btn">
              <el-button size="large" :loading="loading" type="primary" @click="login" long>
                <span v-if="!loading">登 录</span>
                <span v-else>正在登陆...</span>
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="l-bg"></div>
    <div class="r-bg"></div>
    <div class="c-bg">
      <div class="c-bg-item"></div>
      <div class="c-bg-item"></div>
      <div class="c-bg-item"></div>
      <div class="c-bg-item"></div>
    </div>
    <div class="login-footer">
      Copyright {{ new Date().getFullYear() }} by 愉家集智慧小区公司平台管理系统
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      codeImgSrc: "",
      userInfo: {
        userName: "",
        passWord: "",
        verificationCode: "",
        UUID: "",
      },
    };
  },
  directives: {
    focus: {
      inserted: function (el) {
        el.focus();
      },
    },
  },
  created() {
    //监听enter键盘
    document.onkeypress = () => {
      this.loginPress();
    };
    this.getVierificationCode();
    // this.$store.dispatch('navMenus/requestMenus')
  },
  mounted() { },
  methods: {
    getVierificationCode() {
      // this.$http.get("/api/User/getVierificationCode").then((x) => {
      //   this.codeImgSrc = "data:image/png;base64," + x.img;
      //   this.userInfo.UUID = x.uuid;
      // });
    },
    loginPress(e) {
      if (event.keyCode === 13) {
        this.login();
      }
    },
    login() {
      if (!this.userInfo.userName) {
        return this.$msg.error("请输入用户名");
      }
      if (!this.userInfo.passWord) {
        return this.$msg.error("请输入密码");
      }

      this.loading = true;

      // 请求接口
      this.$http.post("/api/Authorize/Sign", this.userInfo,(res) => {
        if (res.Code==200) {
          //获取角色信息
          this.$store.dispatch("navMenus/requestMenus", res.Data);
        } else {
          // this.$msg.error(res.msg);
          this.loading = false;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.bg {
  display: flex;
  overflow: hidden;
  position: relative;
  height: 100%;
  width: 100%;
  background: url("../assets/img/bj.png");
  background-repeat: repeat no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  // background-image: linear-gradient(135deg, #0d82ff 10%, #0cd7bd);
}

.login {
  flex: 1;
}

.content {
  display: flex;
  z-index: 99;
  position: relative;
  width: 360px;
  left: 0;
  right: 0;

  margin: 0 auto;
  margin-left: 65%;
  transform: translateY(-50%);
  // background: #dedede40;
  top: 50%;
  height: 480px;
  border-radius: 10px;
  position: relative;

  .l-left {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    width: 360px;
    // background-image:  linear-gradient(135deg, #0d82ff 10%, #0cd7bd);
    border: 1px solid #5c87ff;
  }

  .login-title {
    font-size: 24px;
    color: #1f2020;
    text-align: center;
    width: 100%;
    line-height: 80px;
  }
}

.desc {
  width: 480px;
  padding: 10px 30px;
  box-sizing: border-box;
  height: 100%;
}

.desc p {
  font-size: 15px;
  color: white;
  line-height: 30px;
}

.desc p:before {
  top: -1px;
  content: "o";
  position: relative;
  margin-right: 7px;
}

.title {
  z-index: 999;
  font-size: 70px;
  font-weight: bold;
  color: white;
}

.l-bg {
  height: 1200px;
  width: 1200px;
  border-radius: 50%;
  // background: #2cecff;
  position: absolute;
  top: -700px;
  left: -700px;
  // background-image: linear-gradient(241deg, #0d82ff 10%, #0cd7bd);
}

.r-bg {
  height: 2000px;
  width: 2000px;
  border-radius: 50%;
  // background: #2cecff;
  position: absolute;
  top: -1500px;
  right: -900px;
  // background-image: linear-gradient(141deg, #0d82ff 10%, #0cd7bd);
}

.el-button--primary {
  width: 100%;
}
</style>

<style lang="less" scoped>
.form-user {
  .f-remove {
    display: none;
  }

  margin: 25px 0;

  .item:hover .f-remove {
    display: block;
  }

  .item {
    display: flex;
    padding-bottom: 5px;
    // border-bottom: 1px solid #eee;
    margin-bottom: 30px;
    display: flex;

    .f-text {
      color: #484848;
      font-weight: 400;
      width: 110px;
      font-size: 16px;

      i {
        position: relative;
        top: 220px;
        right: 5px;
      }
    }

    .f-input {
      border: 0px;
      flex: 1;
    }

    .code {
      position: relative;
      cursor: pointer;
      top: 3px;
      width: 74px;
      border: 1px solid #fdfdfd;
      border-radius: 2px;
      height: 35px;
      margin-left: 10px;
    }
  }
}

input:-webkit-autofill {
  box-shadow: 0 0 0px 1000px white inset;
}

.login-contianer {
  .login-form {
    border-radius: 5px;
    padding: 10px 30px 40px 30px;
    width: 360px;
    min-height: 420px;
    background: white;
    height: 420px;
    box-shadow: 0px 4px 21px #d6d6d6;
  }
}

.login-project {
  line-height: 70px;

  img {
    height: 80px;
  }

  .project-name {
    font-size: 50px;
    position: relative;
    color: white;
    font-weight: 600;
    margin-left: 9px;
  }

  .desc {
    color: wheat;
    font-size: 15px;
  }
}

.loging-btn {
  margin-top: 40px;
}

.action {
  text-align: right;
  margin-top: 20px;

  a {
    margin-left: 20px;
  }
}

.login-footer {
  padding: 15px;
  text-align: center;
  font-size: 21px;
  position: absolute;
  width: 100%;
  bottom: 36px;
  color: #fff;

  // background: #06a3ea;
  // border-top: 1px solid #e2e2e2;
  i {
    position: relative;
    top: -2px;
    margin-right: 5px;
  }

  a {
    color: #fff;
  }
}

@media screen and (max-width: 600px) {
  .desc {
    display: none;
  }

  .bg {
    background-image: none;
  }

  .login-form {
    box-shadow: none !important;
  }

  .login-form {
    width: 100% !important;
  }

  .login-footer,
  .r-bg,
  .l-bg {
    display: none;
  }

  .l-left {
    display: none;
  }

  .c-bg-item {
    background: none !important;
  }
}
</style>
<style scoped>
.login-contianer>>>.ivu-form .ivu-form-item-content {
  margin-left: 0px !important;
}
</style>
<style>
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px white inset !important;
}

input {
  background: white;
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  color: #323233;
  line-height: inherit;
  text-align: left;
  border: 0;
  outline: none;
  font-size: 16px;
  line-height: 20px;
}
</style>
<style lang="less" scoped>
.c-bg {
  position: absolute;
  bottom: -200px;
  width: 100%;
  left: -10%;
  height: 600px;
  // background-image: linear-gradient(95deg, #0d82ff 10%, #0cc9c8);
  border-radius: 50%;
}</style>
